<template>
    <mian-layout>
        <el-descriptions labelClassName="mysdItemLable" title="商品基础资料" :column="2" border>
            <el-descriptions-item label="商品类型">
                <b v-if="oDetail.goodsType==1">实物类商品</b>
                <b v-else-if="oDetail.goodsType==2">3D实物类商品</b>
                <b v-else-if="oDetail.goodsType==3">视频</b>
                <b v-else-if="oDetail.goodsType==4">音乐</b>
                <b v-else-if="oDetail.goodsType==5">3D数字模型</b>
                <b v-else>--</b>
            </el-descriptions-item>
            <el-descriptions-item label="商品标题">{{oDetail.title}}</el-descriptions-item>
            <el-descriptions-item label="副标题" :span="2">{{oDetail.subtitle}}</el-descriptions-item>
            <el-descriptions-item label="创作故事" :span="2">{{oDetail.creatStory}}</el-descriptions-item>
            <el-descriptions-item label="商品分类" v-if="oDetail.categoryDTO">{{oDetail.categoryDTO.name}}</el-descriptions-item>
            <el-descriptions-item label="关联艺术家" v-if="oDetail.artistDTO">{{oDetail.artistDTO.nick}}</el-descriptions-item>
            <el-descriptions-item v-if="oDetail.marketPrice" label="市场价">{{oDetail.marketPrice.decimalTwoString}}</el-descriptions-item>
            <el-descriptions-item v-if="oDetail.settlePrice" label="商品成本价">{{oDetail.settlePrice.decimalTwoString}}</el-descriptions-item>
            <el-descriptions-item label="库存">{{oDetail.stock}}</el-descriptions-item>
        </el-descriptions>
        <br/>
        <el-descriptions labelClassName="mysdItemLable" title="商品与地标、U3D的关联" :column="2" border>
            <el-descriptions-item label="关联AR地标" v-if="oDetail.arLandmarkIds">
                {{arLandmarkNames.join(',')}}
            </el-descriptions-item>
            <el-descriptions-item label="关联U3D物品" v-if="oDetail.arObjectDTO">{{oDetail.arObjectDTO.objectName}}</el-descriptions-item>
        </el-descriptions>
        <br/>
        <template v-if="oDetail.goodsType!=3 && oDetail.goodsType!=4">
            <el-descriptions labelClassName="mysdItemLable" title="商品规格、参数" :column="2" border>
                <el-descriptions-item label="商品规格" :span="2" v-if="oDetail.specs">
                    <p v-for="(dt,i) in oDetail.specs" :key="`spec${i}`">
                        <b>{{dt.specGroupName}}</b>：
                        <span v-for="(dt2,j) in dt.specItems" :key="`specItem${j}`">{{dt2.specName}}、</span>
                    </p>
                </el-descriptions-item>
                <el-descriptions-item label="商品参数" :span="2">
                    <span v-for="(dt,index) in oDetail.params" :key="index">
                        <b>{{dt.paramName}}:</b>{{dt.paramValue}}，  
                    </span>
                </el-descriptions-item>
            </el-descriptions>
            <br/>
            <template v-if="oDetail.goodsType!=5">
                <el-descriptions labelClassName="mysdItemLable" title="物流费用" :column="2" border>
                    <el-descriptions-item label="常规物流费用" :span="2" v-if="oDetail.logisticsAmount">{{oDetail.logisticsAmount.decimalTwoString}}</el-descriptions-item>
                    <el-descriptions-item label="偏远地区物流费用" v-if="oDetail.remoteLogisticsAmount">{{oDetail.remoteLogisticsAmount.decimalTwoString}}</el-descriptions-item>
                    <el-descriptions-item label="偏远地区">{{oDetail.remoteArea}}</el-descriptions-item>
                </el-descriptions>
            </template>
        </template>
        <br/>
        <el-descriptions labelClassName="mysdItemLable" title="商品出售模式" :column="2" border>
            <template v-if="oDetail.saleModes && oDetail.saleModes.code=='DIRECT'">
                <el-descriptions-item label="出售模式" v-if="oDetail.saleModes">{{oDetail.saleModes.message}}</el-descriptions-item>
                <el-descriptions-item label="会员价" v-if="oDetail.internalPrice">{{oDetail.internalPrice.decimalTwoString}}</el-descriptions-item>
            </template>
            <template v-else-if="oDetail.saleModes && oDetail.saleModes.code=='AUCTION'">
                <el-descriptions-item label="出售模式" v-if="oDetail.saleModes">{{oDetail.saleModes.message}}</el-descriptions-item>
                <el-descriptions-item label="拍卖起始价" v-if="oDetail.auctionPrice">{{oDetail.auctionPrice.decimalTwoString}}</el-descriptions-item>
                <el-descriptions-item label="拍卖开始时间">{{oDetail.auctionStartTime}}</el-descriptions-item>
            <el-descriptions-item label="拍卖结束时间">{{oDetail.auctionEndTime}}</el-descriptions-item>
            </template>
        </el-descriptions>
        <br/>
        <el-descriptions labelClassName="mysdItemLable" title="商品图片" :column="2" border>
            <el-descriptions-item label="商品头图" :span="2">
                <div class="imgItemBox">
                    <a target="_black" v-for="item in oDetail.headImageUrls" :key="item" :href="item"><img :src="item"></a>
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="商品详情图" :span="2">
                <div class="imgItemBox">
                    <a target="_black" v-for="item in oDetail.detailImageUrls" :key="item" :href="item"><img :src="item"></a>
                </div>
            </el-descriptions-item>
            <el-descriptions-item v-if="oDetail.goodsType==2 || oDetail.goodsType==5" label="3D模型源文件" :span="2">
                <p v-for="dt in oDetail.model3dFileUrls" :key="dt">{{dt}}</p>
            </el-descriptions-item>
            <el-descriptions-item v-if="oDetail.goodsType==3" label="视频文件" :span="2">
                <div v-for="dt in oDetail.videoFileUrls" :key="dt" style="margin-bottom:15px">
                    <video class="myvideo" style="width:500px;height:200px" ref="videoEle" controls>
                        <source :src="dt" type="video/mp4">
                        您的浏览器不支持Video标签。
                    </video>
                </div>
            </el-descriptions-item>
            <el-descriptions-item v-if="oDetail.goodsType==4" label="音频文件" :span="2">
                <template v-if="oDetail.musicFileUrls && oDetail.musicFileUrls.length>0">
                    <div v-for="dt in oDetail.musicFileUrls" :key="dt" style="margin-bottom:15px">
                        <audio ref="audioEle" controls style="width:500px;height:80px">
                            <source :src="dt" type="audio/mpeg">
                            您的浏览器不支持 audio 元素。
                        </audio>
                    </div>
                </template>
            </el-descriptions-item>
        </el-descriptions>
        <br/>
        <template v-if="oDetail.goodsType!=3 && oDetail.goodsType!=4 && oDetail.goodsType!=5">
            <el-descriptions labelClassName="mysdItemLable" title="售后服务" :column="2" border>
                <el-descriptions-item label="售后服务说明图片" :span="2">
                    <div class="imgItemBox">
                        <img v-for="item in oDetail.saleServiceImageUrls" :src="item" :key="item">
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="售后服务说明" :span="2">{{oDetail.saleServiceMsg}}</el-descriptions-item>
            </el-descriptions>
        </template>
        <br/>

        <div style="text-align: center;">
            <my-back type="info" :reGetDataFlag="true">返回</my-back>
            <el-button type="success" plain icon="el-icon-edit" @click="$router.push(`/goods/add?id=${gId}`)">修改</el-button>
        </div>
    </mian-layout>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myBack from '@/components/public/myBack.vue'
import {
  get_goods_detail,
} from '@/api/arApi'
export default {
    components:{
      myTable,
      myBack
    },
    data(){
        return{
            gId:'',
            oDetail:{},
            arLandmarkNames:[]
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.gId = this.$route.params.id
        this.getData()
    },
    methods:{
        async getData(){ 
            const res = await get_goods_detail(this.gId)
            if(res.success){
                this.oDetail = res.data
                this.oDetail.arLandmarkIds.forEach(item => {
                    this.arLandmarkNames.push(item.arLandmarkName)
                });
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .imgItemBox{
        display: flex;
        img{
            display: block;
            height: 100px;
            margin: 0 10px 0 0;
        }
    }
</style>
<style lang="scss">
    .mysdItemLable{
        width: 150px;
    }
</style>